<script setup>
import { ref, onMounted, computed, watch } from "vue";

// 声明
const todos = ref([]);
const name = ref("");

const input_content = ref("");
const input_category = ref(null);

const todos_asc = computed(() => todos.value.sort((a, b) => {
    return b.createdAt - a.createdAt;  // 根据时间排列
  })
);

// 添加逻辑
const addTodo = () => {
  if (input_content.value.trim() === '' || input_category.value == null) {
    return;
  }
  todos.value.push({
    content: input_content.value,
    category: input_category.value,
    done: false,
    createdAt:new Date().getTime()
  });

  // 添加结束后置空
  input_content.value = '';
  input_category.value = null;
}

// 删除方法
const removeTodo = (todo) => {
  //留下不等于todo的内容,返回所有符合条件的内容
  todos.value = todos.value.filter(t=>t!==todo);
};


// 编辑方法
const editTodo = (todo) => {
  // console.log(todo);
  // 重新触发编辑
  input_content.value = todo.content;
  input_category.value = todo.category;
  // 会有重复，删掉之前那个,但是必须在提交之后才删除
}

// 获取时间
const getCurrentTime = () => {
  // 获取当前时间戳
  const timestamp = Date.now();
  // 将时间戳转换为 Date 对象
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  // 将年月日拼接成字符串，并返回
  const currentDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
  return currentDate;
}


watch(todos, newVal => { 
  // 深度监视
  localStorage.setItem('todos', JSON.stringify(newVal));
}, { deep: true })

watch(name, (newVal) => { 
  localStorage.setItem('name', newVal);
})

// 页面渲染时
onMounted(() => {
  name.value = localStorage.getItem('name') || '';
  todos.value = JSON.parse(localStorage.getItem('todos')) || [];
})



</script>

<template>
  <main class="app">
    <section class="greeting">
      <h2 class="title">
        <!-- 双向绑定 -->
        你需要做些什么,<input type="text" placeholder="请输入你的名字" v-model="name">
      </h2>
    </section>

    <section class="create-todo">
      <h3><b>创建一个待办事项</b></h3>
      <form @submit.prevent="addTodo">
        <h4>请输入你的待办事项</h4>
        <input type="text" placeholder="示例:听一首歌!" v-model="input_content">
        <h4>请选择待办事项类型</h4>
        <div class="options">
          <label>
            <input type="radio" name="category" value="bussiness" v-model="input_category">
            <span class="bubble bussiness"></span>
            <div>业务</div>
          </label>

          <label>
            <input type="radio" name="category" value="personal" v-model="input_category">
            <span class="bubble personal"></span>
            <div>个人</div>
          </label>
        </div>

        <input type="submit" value="添加待办事项">
      </form>
    </section>

     <!-- 待办列表 -->
     <section class="todo-list">
      <h3>待办事项</h3>
      <div class="list">
        <!-- 根据创建时间来生成key!!! -->
        <div v-for="todo in todos_asc" :key="createdAt" :class="`todo-item ${todo.done&&'done'}`">
          <label>
            <input type="checkbox" v-model="todo.done">
            <span :class="`bubble ${todo.category}`"></span>
          </label>
          <div class="todo-content">
            <input type="text" v-model="todo.content">
          </div>

          <!-- 加一个时间显示板块 -->
          <div class="actions">
            {{getCurrentTime()}}
          </div>

          <!-- 编辑按钮 -->
          <div class="actions">
            <button class="edit" @click="editTodo(todo)">编辑</button>
          </div>
          <!-- 删除按钮 -->
          <div class="actions">
            <button class="delete" @click="removeTodo(todo)">删除</button>
          </div>
        </div>
      </div>
    </section>






  </main>
</template>